<template>
  <van-nav-bar
    title="我的订单"
    left-text="返回"
    left-arrow
    @click-left="
      () => {
        $router.push('/');
      }
    "
  />
  <search></search>
  <van-tabs v-model:active="active" @change="onChange">
    <van-tab title="全部"></van-tab>
    <van-tab title="待支付"></van-tab>
    <van-tab title="已支付"></van-tab>
  </van-tabs>

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
     <van-skeleton title :row="4" :loading="!ispd"/>
  <div class="orderlist" v-for="item in fetchData" v-if="ispd">
    <div class="order">
      <div>
        下单时间:<span>{{ item.create_time }}</span>
      </div>
      <div>
        订单号:<span>{{ item.orderId }}</span>
      </div>
      <div>
        订单状态:<span>{{ item.status == 0 ? "待支付" : "已支付" }}</span>
      </div>
      <div>
        订单价格:<span>{{ item.totalPrice }}</span>
      </div>
      <div>
        订单介绍:<span>{{ item.product_code }}</span>
      </div>
    </div>
  </div>
  </van-list>
</van-pull-refresh>

 
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {orderListApi} from '@/api/api'
import search from '@/components/search.vue'

let orderlist=ref([])
let fetchData=ref([])

let page=ref(1)
let pagesize=ref(5)
let total=ref(0)
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const orderlistData=()=>{
    orderListApi(localStorage.getItem('username')).then((res)=>{
    console.log('订单列表数据',res)
    orderlist.value=res.data.data
   

    let startindex=(page.value-1)*pagesize.value
    let endindex=startindex+pagesize.value
    total.value=res.data.data.length
    orderlist.value=res.data.data.slice(startindex,endindex)
     loading.value=true
    if(orderlist.value.length>=total.value){
        finished.value=true
    }
     fetchData.value=orderlist.value
})
}
orderlistData()

//下拉刷新
const onRefresh=()=>{
    page.value++
    orderlist.value=[]
     finished.value=false
    refreshing.value=false
   orderlistData()
}
// //上拉加载
// const onLoad=async()=>{
//     if(finished.value)return
//     page.value++
//     const res=await orderListApi()
//     let startindex=(page.value-1)*pagesize.value
//     let endindex=startindex+pagesize.value
//     let newData=res.data.data.slice(startindex,endindex)
//     orderlist.value=[...orderlist.value,...newData]
//     loading.value=true
//     if(orderlist.value.length>=total.value){
//         finished.value=true
//     }
// }

const onChange=(index)=>{
    if(index==0){
        console.log(0)
        fetchData.value=orderlist.value
    }
    if(index==1){
        console.log(1)
        fetchData.value=orderlist.value.filter(item=>item.status==0)
    }
    if(index==2){
        console.log(2)
        fetchData.value=orderlist.value.filter(item=>item.status>=1)
    }
}

onMounted(()=>{
    onChange(0)
})


let ispd=ref(false)
setTimeout(()=>{
  ispd.value=true
},2000)
</script>

<style lang="scss" scoped>
.orderlist {
  .order {
    width: 90%;
    height: 100px;
    margin: 5px 20px;
    font-size: 12px;
    background: #eee;
  }
}
</style>
